<template>
  <div class="body">
<!--    <div>{{article}}</div>-->
    <header class="headLine">
      <h1>{{ article.headline }}</h1>
    </header>
    <div class="descriptions">
      <div>
        <div><el-button link>作者： {{ article.authorId }}</el-button></div>
        <div><el-button link>浏览数： {{ article.viewsNo }}</el-button></div>
        <div><el-button link>评论数： {{ article.commentsNo }}</el-button></div>
        <div><el-button link>点赞数： {{ article.likeNo }}</el-button></div>
        <div><el-button link>收藏数： {{ article.collectionNo }}</el-button></div>
      </div>
      <div>
        <div><el-button v-if="article.releaseTime" link>发布时间： {{ article.releaseTime.replace('-', '年').replace('-', '月').replace(' ', '日 ') }}</el-button></div>
        <div><el-button link>分类专栏 <el-tag>{{ article.classifications }}</el-tag></el-button></div>
        <div><el-button link>标签 <el-tag>{{ article.labels }}</el-tag></el-button></div>
      </div>
      <div>
        <div><el-button link>
          <span v-if="article.type === 'ORIGINAL'">自制</span>
          <span v-else-if="article.type === 'REPRINT'">转载</span>
          <span v-else-if="article.type === 'TRANSLATE'">翻译</span>
        </el-button></div>
      </div>
    </div>
    <markdown-preview v-model="article.content"/>
    <div class="footer">
      <div>
        <el-button size="small" link>作者：{{ article.authorId }}</el-button>
        <el-button size="small">+ 关注</el-button>
        <el-button size="small" type="primary">已关注</el-button>
      </div>
      <div>
        <div>
          <el-button size="small">点赞 {{ article.likeNo }}</el-button>
          <el-button size="small" type="danger">已赞 {{ article.likeNo }}</el-button>
        </div>
        <div>
          <el-button size="small">踩</el-button>
          <el-button size="small" type="info">已踩</el-button>
        </div>
        <div>
          <el-button size="small">收藏</el-button>
          <el-button size="small" type="primary">已收藏</el-button>
        </div>
        <div>
          <el-button size="small" link>评论数：{{ article.commentsNo }}</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { ref } from 'vue'
import { articleById } from '@/api/article'
import MarkdownPreview from '@/components/markdown-preview/markdown-preview'

export default {
  name: 'article-view',
  components: { MarkdownPreview },
  setup () {
    return {
      article: ref({
        content: '',
        releaseTime: ''
      })
    }
  },
  methods: {
    getArticle (articleId) {
      articleById(articleId).then(value => {
        this.article = value.data
        console.log(this.article.content)
      })
    }
  },
  mounted () {
    document.documentElement.scrollTop = 0
    const query = this.$router.currentRoute.value.query
    if (query) {
      const articleId = query.articleId
      if (articleId) {
        this.getArticle(articleId)
      }
    }
  }
}
</script>

<style scoped>
.headLine > h1{
  font-size: 40px;
  line-height: 44px;
  margin: 10px 50px;
  word-break: break-all;
}
.descriptions{
  margin: 10px 50px 20px 50px;
  padding: 18px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}
.descriptions > div{
  display: flex;
  align-items: baseline;
}

.descriptions > div > div{
  margin-right: 20px;
  padding: 0 10px;
  border-bottom: 1px #6494ec solid;
  border-radius: 9px;
}
.footer {
  margin-top: 10px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.footer > div:nth-child(2){
  display: flex;
  justify-content: space-around;
  width:500px;
}
</style>
